<template>
  <el-dialog
    :title="type == 'add' ? '添加' : '编辑'"
    v-model="Visible"
    width="30%"
    center
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <el-form
      :model="ruleForm"
      label-width="80px"
      ref="chartForm"
      :rules="rules"
      class="demo-form-inline"
    >
      <el-form-item label="名称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="编码" prop="code">
        <el-input v-model="ruleForm.code"></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input type="textarea" v-model="ruleForm.remark"></el-input>
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input v-model="ruleForm.sort"></el-input>
      </el-form-item>
      <el-form-item style="text-align: center;margin-top:20px;">
        <el-button type="primary" v-preventReClick @click="onSubmit"
          >确定</el-button
        >
        <el-button @click="Visible = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
import { reactive, toRefs, ref, nextTick } from "vue";
// import { addConfiguration } from "@/api/configuration";
import gojsConfig from "../index.js";
import { onMounted } from "@vue/runtime-core";
export default {
  name: "dialog",
  props: {
    Visible: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String,
      default: "add",
    },
    dialogRow: {
      type: Object,
      default: () => {},
    },
  },
  setup(prop, context) {
    const chartForm = ref(null);
    const state = reactive({
      ruleForm: {
        name: "",
        code: "",
        remark: "",
        sort: 1,
      },
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        code: [{ required: true, message: "请输入编码", trigger: "blur" }],
      },
    });

    onMounted(() => {
      if (prop.type == "add") {
        nextTick(() => {
          chartForm.value.resetFields();
        });
      } else {
        state.ruleForm = prop.dialogRow;
      }
    });
    const handleClose = () => {
      context.emit("close", false);
    };
    const onSubmit = () => {
      chartForm.value.validate((valid) => {
        if (valid) {
          if (prop.type == "add") {
            gojsConfig.GOJSSave(state.ruleForm);
          } else {
            //编辑
            gojsConfig.GOJSSave(state.ruleForm);
          }
        }
      });
    };
    return {
      ...toRefs(state),
      handleClose,
      onSubmit,
      chartForm,
    };
  },
};
</script>
